 
<template class="app">
	<view class="main col">  
		 <view class="card1 flex">
		   <view class="left ">
		   	<view class="card-title"> 录音发布 </view>
		   	<view class="tip"> 点击发布自己的原创录音~ </view> 
		   </view>
		   <view  class="right-bg"> </view>
		 </view>
		 
		 <view class="card2 flex">
		  <view class="left">
		  	<image src="/static/read/home/box.png" style="width: 20px;height: 20px;"></image>
		  	  
		  </view>	 
		  <view class="middle flex">
		  	<view class="card-title"> 录音素材 </view>
		  	<view class="tip"> 海量录音素材任你挑选~ </view> 
		  </view>	 
		  <view class="right">
		  	 <u-icon name="arrow-right"></u-icon>
		  </view> 
		 </view>
		 <view class="bar-line between">
			<text>草稿箱(2)</text>
			<image src="/static/read/home/b.png" style="width: 20px;height: 20px;"></image>
		 </view>
		 <view class="list">
		    <view class="item">
				 <view class="item-left center">
				 	  <image src="/static/read/home/c.png" style="width: 20px;height: 20px;"></image>
				 </view>
				 <view class="item-middle">
				 	   <view class="name">2017010110</view>
					   <text class="time">更新于2021-07-04 15:23 </text>
				 </view>
				 <view class="item-right">
				 	   <image src="/static/read/home/time.png" style="width: 15px;height: 15px;"></image>
					   <text class="time">01:29</text>
				 </view>
		    </view>
			
			<view class="item">
				 <view class="item-left center">
				 	  <image src="/static/read/home/c.png" style="width: 20px;height: 20px;"></image>
				 </view>
				 <view class="item-middle">
				 	   <view class="name">2017010110</view>
					   <text class="time">更新于2021-07-04 15:23 </text>
				 </view>
				 <view class="item-right">
				 	   <image src="/static/read/home/time.png" style="width: 15px;height: 15px;"></image>
					   <text class="time">01:29</text>
				 </view>
			</view>
		   
		 </view>
		 
	</view>
</template> 
<script> 
export default {
	data() {
		 return {
			 tabs:[ 
			 ],
			 cur:1,
		 }
	},
	mounted() { 
		 uni.setNavigationBarTitle({
		 	title:"创作中心"
		 })
	}
}
	 
</script>

<style lang="less">
	.app{ height: 100vh; padding: 0 15px; }
	
	.flex{display: flex; flex: 1;}
	.center{display: flex; justify-content: center; align-items: center;}
	.between{display: flex; justify-content: space-between; align-items: center;}
	.col{ display: flex; flex-direction: column;}
	.card1{
		   background: #333333;
		   border-radius: 10px;
		   width: 100%;
		   height:124px;
		   vertical-align: middle;
		   background: linear-gradient(-55deg, #F26122, #FE5D25);
		   border-radius: 20px;
		   color: #FFF;
		   .left{
			   padding: 30px 15px;
			   display: flex;
			   flex: 1;
			   flex-direction: column;
		   }
		   .right-bg{
		   	 background: url(/static/read/home/a.png);
		   	 background-size: 100% 100%;
		   	 height: 124px;
		   	 width: 100px; 
		   }
	}
	
	.card2{
		   margin: 10px 0;
		   width: 100%;
		   height: 73px;
		   border-radius: 10px;
		   
		   background: url(/static/read/home/d.png) no-repeat;
		   background-size: 100% 100%;
		   color: #FFF;
		   .left{padding: 10px;}
		   .middle{
			  display: flex; flex-direction: column;padding: 10px;
		   }
		   .right{padding: 25px 10px;}
	}
	
	.card-title{font-size: 20px;}
	.tip{ margin-top: 10px;} 
	
	
	.list{ 
	   flex:1;
	   overflow-y:auto ;
	   max-height:70vh;
	}
	.item{
		margin: 10px 0;
		display: flex; 
		.item-left{
			background:#F1F3F4;
			width: 50px;
			height: 50px;
			border-radius: 10px;
			margin-right: 10px;
		}
		.item-middle{
			display: flex; flex: 1; flex-direction: column;justify-content: flex-end;
			.time{ font-size: 12px; color: #B2B2B2; }
		}
		.item-right{
			display: flex; 
			width: 100px;
			.time{ font-size: 12px; color: #B2B2B2; margin-left: 5px;}
		}
	}
	
	 
</style>


